<template>
	<view :class="custonName == '我的'?'header-me fixed-top':'header fixed-top'"
		:style="{paddingTop:navBarTop + 'px',height:navBarHeight + 10 +'px',lineHeight:navBarHeight + 10 + 'px',backgroundColor:props.headColorChild}">
		<view class="returnBtn" @click="goBack" v-if="isShowBack">
			<up-icon name="arrow-left" :color="custonName == '我的'?'#fff':'#000'" size="20"></up-icon>

		</view>
		<view class="device-name" v-if="custonName">
			{{custonName}}
		</view>
		<slot></slot>
	</view>
	<view
		:style="{paddingTop:navBarTop + 'px',height:navBarHeight + 10 +'px',lineHeight:navBarHeight + 10 + 'px',backgroundColor:props.headColorChild}">

	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const props = defineProps({
		headColorChild: {
			type: String,
			default: '#dae0eb' // 未传递时默认白色
		},
		isShowBack: {
			type: Boolean,
			default: true,
		},
		custonName: {
			type: String,
			default: ""
		}
	})
	const navBarTop = ref(null)
	const navBarHeight = ref(null)
	onLoad((e) => {
		let statuBar = uni.getSystemInfoSync().statusBarHeight;
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		navBarTop.value = menuButtonInfo.top;
		navBarHeight.value = menuButtonInfo.height;
	});

	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style scoped>
	.fixed-top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;

		/* 确保在最上层 */
	}

	.header {
		display: flex;
		align-items: center;
		font-size: bold;
		font-size: 30rpx;
		border-bottom: 1px solid #d7d7d7;
		padding-left: 40rpx;
	}

	.header-me {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: bold;
		font-size: 46rpx;
		padding-left: 40rpx;
		color: #fff;
	}

	.returnBtn {
		width: 30px;
	}

	.device-name {
		width: 70%;
		text-align: center;
		font-size: 16px;
	}
</style>